<template>
  <div style="width: 100%; height: 100%">
    <el-card class="layers-conterner" :body-style="{ height: 'calc(100% - 100px)' }">
      <template #header>
        <div class="layers-query" :style="{ height: '90px' }">
          <div class="layers-query-title">
            <span class="normal-title">图层</span><span class="title-description">图层管理</span>
          </div>
          <el-form class="layers-query-form" :model="layersQueryFormData" :inline="true">
            <el-form-item label="工作空间 :">
              <el-select
                v-model="layersQueryFormData.workspace"
                filterable
                placeholder="请选择工作空间"
              >
                <el-option
                  v-for="workspaceItem in workspaceList"
                  :key="workspaceItem.name"
                  :label="workspaceItem.name"
                  :value="workspaceItem.name"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="图层名称 :">
              <el-input v-model="layersQueryFormData.name" placeholder="请输入..." />
            </el-form-item>
            <el-form-item style="margin-left: auto">
              <el-button @click="startQuery">查询</el-button>
              <el-button @click="reset">重置</el-button>
              <el-button type="primary" size="small" @click="addLayer">添加</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <div class="card-body-conterner">
        <LayerTableView @refresh="startQuery"></LayerTableView>
      </div>
      <addOrUpdate ref="addOrUpdateRef" @update-layers="startQuery"></addOrUpdate>
    </el-card>
    <cacheSet></cacheSet>
    <infoDetail></infoDetail>
  </div>
</template>

<script setup lang="ts" name="authButton">
import useWorkspaceModal from '@/composables/useWorkspace'
import useLayersModal from '@/composables/useLayers'
import addOrUpdate from './publish/index.vue'
import useLayersFilterModal, { useLayerPublishModal } from './hooks'
import cacheSet from './cacheSet/index.vue'
import infoDetail from './infoDetail/index.vue'
import { onBeforeMount, onMounted, ref } from 'vue'
import type { IWorkspace } from 'geoserver-helper/interface'
import LayerTableView from './tableView/index.vue'
const workspaceModal = useWorkspaceModal()
const layersModal = useLayersModal()
const layersFilterModal = useLayersFilterModal()
// 图层发布相关hook
const layerPublishModal = useLayerPublishModal()
// 图层查询表单
const layersQueryFormData = layersFilterModal.layersQueryFormData

const workspaceList = workspaceModal.workspaceList
//查询出的原始数据(用于分页)
const orignTableData = layersFilterModal.orignTableData
// 数据总条数
const totalOrignTableData = layersFilterModal.totalOrignTableData
interface layersFormDialogExpose {
  openDialog: (opentionTypeParam?: string) => void
  setOrignWorkspace: (orignWorkspaceParam: IWorkspace.WorkspaceOperationForm) => void
}
const addOrUpdateRef = ref<layersFormDialogExpose | undefined>()
/**
 * @description: 查询
 * @return {*}
 */
const startQuery = (refresh: boolean = false) => {
  totalOrignTableData.value = 0
  orignTableData.value = []
  layersModal.getLayerList(refresh).then((res) => {
    layersModal.layerList.value.forEach((singleLayer) => {
      const currentWorkspace = singleLayer.name.includes(':') ? singleLayer.name.split(':')[0] : ''
      if (
        !layersQueryFormData.value.workspace ||
        currentWorkspace === layersQueryFormData.value.workspace
      ) {
        if (
          !layersQueryFormData.value.name ||
          singleLayer.name.includes(layersQueryFormData.value.name)
        ) {
          totalOrignTableData.value += 1
          orignTableData.value.push({
            name: singleLayer.name,
            attribution: { logoHeight: 0, logoWidth: 0 },
            type: '',
            dateCreated: '',
            dateModified: '',
            opaque: false,
            queryable: true,
            resource: { name: '', '@class': '', href: '' },
            defaultStyle: { name: '', workspace: '', href: '' },
          })
        }
      }
    })
  })
}

/**
 * @description: 添加图层
 * @return {*}
 */
const addLayer = () => {
  layerPublishModal.publishLayerVisible.value = true
}

/**
 * @description: 重置
 * @return {*}
 */
const reset = () => {
  layersQueryFormData.value = JSON.parse(
    JSON.stringify(layersFilterModal.defaultLayersQueryFormData),
  )
}
onBeforeMount(() => {
  // 此处执行一次后确保 workspaceList 有值
  workspaceModal.getWorkspaceList()
})
onMounted(() => {
  startQuery()
})
</script>

<style scoped lang="scss">
@use './index';
</style>
